@import (reference) '../../business/style/uxc.less';
@border-colod: #d3d3d3;

sn-tabs {
  & > div {
    position: relative;
  }
  .btn-prev, .btn-next {
    position: absolute;
    display: block;
    height: 42px;
    width: 30px;
    
    a {
      height: 42px;
      padding: 10px;
      min-width: 0;
    }
  }
  .btn-prev {
    left: 0;
  }
  .btn-next {
    right: 0;
  }
  div.nav-contant {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    height: 42px;
    margin: 0 30px;

    & > ul.nav.nav-tabs {
      position: absolute;
      border-bottom: 0;
      
      > li {
        float: inherit;
        display: inline-block;
        border-top: 1px solid @border-colod;
        border-left: 1px solid @border-colod;
        border-bottom: 1px solid @border-colod;
        &:last-child {
          border-right: 1px solid @border-colod;
        }
        > a {
          border: 0;
          color: @font-text-color;
          border-radius: 0;
          margin-right: 0;
          margin-bottom: -1px;
          cursor: pointer;
          // min-width: 90px;
          // text-align: center;
          > hr {
            display: none;
          }
        }

        &.active {
          border-top: 2px solid @brand-primary;
          top: 1px;
          > a {
            color: @brand-primary;
            font-weight: 700;
            > hr {
              display: block;
              position: absolute;
              bottom: -1px;
            }
          }
        }
      }
    }
    
  }
}

sn-tabs.reverse > div > div.nav-contant > ul.nav.nav-tabs > li {
    border-bottom: 2px solid @brand-primary;
    > a {
      margin-bottom: -1px;
    }
    &.active {
      background: @brand-primary;
      > a {
        background: @brand-primary;
        color: @font-white-color;
      }
    }
}

sn-tabs.mini > div {
  > div.nav-contant {
    height: 30px;

    > ul.nav.nav-tabs > li {
      > a {
        font-size: @font-size-small;
        padding: 6px 15px;
      }
      &.active {
        border-top: 1px solid @brand-primary;
        top: 0;
        background: @brand-primary;
        > a {
          font-weight: 0;
          background: @brand-primary;
          color: @font-white-color;
        }
      }
    }
  } 
} 

sn-tabs.no-btn > div {
  > .btn-prev, > .btn-next {
    display: none;
  }
  > div.nav-contant {
    margin: 0;
  }
}